<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name= "viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="keywords" content="pomodoro technique, pomodoro timer, tomato timer, tomato5, collaboration, real-time, productivity">
    <meta name="description" content="Tomato5 is a real-time collaboration tool. It combines Pomodoro Technique with a team status board.">
    <title>Tomato5</title>
    <link rel="icon" href="http://tomato5.io/static/icons/tomato.png">
    <link href="https://fonts.googleapis.com/css?family=Short+Stack" rel="stylesheet">
  </head>
  <body>
    <article id="welcome" class="welcome">
      <section class="brand">
        <div class="title">
          <img class="logo" src="src/assets/tomato.svg">
          <h1 class="">Tomato5</h1>
        </div>
        <h2 class="slogan ">Concentrate with your team</h2>
      </section>
      <section class="indexStart">
        <a href="/dashboard.html" id="startNow" class="">Start now</a>
      </section>
    </article>
    <article id="instruction" class="introduction">
      <section class="what">
        <h2>What is Tomato5</h2>
        <p>
          Tomato5 is a real-time collaboration tool
        </p>
        <p>
          It combines Pomodoro Technique with a team status share board
        </p>
      </section>
      <section class="features">
        <h2>Features</h2>
        <div class="feature timer clearfix">
          <div class="detail">
            Set Pomodoro Timer
          </div>
          <img src="src/assets/images/timer.png" alt="timer" />
        </div>
        <div class="feature emotions right clearfix">
          <div class="detail">
            Track energy level
          </div>
          <img src="src/assets/images/emotions.png" alt="emotions" />
        </div>
        <div class="feature team clearfix">
          <div class="detail">
            Share task status
          </div>
          <img src="src/assets/images/team.png" alt="team" />
        </div>
        <div class="feature flowers right clearfix">
          <div class="detail">
            Give thumbs up
          </div>
          <img src="src/assets/images/flowers.png" alt="flowers" />
        </div>
        <div class="feature bubble clearfix">
          <div class="detail">
            Show speech bubble
          </div>
          <img src="src/assets/images/bubble.png" alt="bubble" />
        </div>
        <div class="feature metric right clearfix">
          <div class="detail">
            Analyze key metrics
          </div>
          <img src="src/assets/images/metric.png" alt="metric" />
        </div>
      </section>
      <section class="why">
        <h2>Why Tomato5?</h2>
        <p>Traditional collaboration tools only tell the team <strong>what to achieve</strong>, without concern about <strong>individual's actual status</strong>.</p>
        <p>By sharing what we are doing、thinking、and feeling in real-time, we can express ourselves more adequately, feel more connected to the team, and get more feedbacks on time.</p>
        <!-- <p>
          Tomato5 is clean and comfortable. You can easily get started with your team, or just use it for yourself to improve productivity.
        </p> -->
      </section>
      <section class="tools">
        <h2>Add Tomato5 to your productivity toolkit</h2>
        <img src="src/assets/images/tools.png" alt="tools" />
      </section>
    </article>
    <!-- <p class="instruction"><span>Concentrate for work</span> <span>five times a day</span></p> -->
    <div class="tools">
    </div>
    <article class="indexFooter">
      <div>
        <a href="https://github.com/zhangxin840/tomato5" target="_blank">Star me on Github</a>
      </div>
      <!-- <p>
        <a href="https://www.focusboosterapp.com/the-pomodoro-technique
" target="_blank">The theory behind: Pomodoro Technique</a>
      </p> -->
      <!-- <p>
        <div>Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
      </p> -->
    </article>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-82894599-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
